@import 'mo/style/common';
$icon-size: 22px;

#{$notification} {
    background-color: var(--workbenchBackground);
    bottom: 10px;
    color: var(--foreground);
    cursor: default;
    display: none;
    overflow: hidden;
    position: absolute;
    right: 8px;
    z-index: 1000;

    &__header {
        align-items: center;
        direction: ltr;
        display: flex;
        height: 35px;
        padding-left: 8px;
        padding-right: 5px;

        > span {
            font-size: 11px;
            text-transform: uppercase;
        }

        #{$actionBar} {
            flex: 1;

            &__item .codicon {
                height: $icon-size;
                width: $icon-size;
            }
        }
    }

    &__body {
        max-height: 500px;
        min-width: 450px;
        overflow: hidden;
        overflow-y: auto;
        padding: 0 8px;
        position: relative;

        &:not(:empty) {
            padding-bottom: 8px;
        }
    }

    &__item {
        padding: 5px;
        text-align: left;
        transition: background-color 0.3s;

        &:hover {
            background-color: var(--list-hoverBackground);
        }
    }

    &--close {
        cursor: pointer;
        float: right;
    }

    #{$btn} {
        color: var(--button-foreground);
    }
}
